<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="header-section">
			<!-- 用户信息区域 -->
			<view class="user-card">
				<view class="user-info" @click="navigateToProfile">
					<image class="user-avatar" :src="userInfo.avatar || '/static/default-avatar.png'"></image>
					<view class="user-detail">
						<view class="user-name">{{userInfo.nickName || '用户昵称'}}</view>
						<view class="user-id">ID: {{userInfo.userId || '未登录'}}</view>
					</view>
					<view class="edit-profile">
						<text class="edit-text">编辑</text>
					</view>
				</view>
				
				<view class="user-wallet">
					<view class="wallet-item" @click="navigateToBalanceLog">
						<text class="wallet-amount">{{userInfo.balance || 0}}</text>
						<text class="wallet-label">余额(元)</text>
					</view>
					<view class="wallet-item">
						<text class="wallet-amount">{{userInfo.coupons || 0}}</text>
						<text class="wallet-label">优惠券</text>
					</view>
					<view class="wallet-item">
						<text class="wallet-amount">{{userInfo.points || 0}}</text>
						<text class="wallet-label">积分</text>
					</view>
				</view>
			</view>
		</view>
			
		<!-- 我的服务区域 -->
		<view class="form-container">
			<view class="section-title">
				<text class="title-text">我的服务</text>
			</view>
			<view class="service-grid">
				<view class="service-item" v-for="(item, index) in services" :key="index" @click="navigateToService(item)">
					<image class="service-icon" :src="item.icon"></image>
					<text class="service-name">{{item.name}}</text>
				</view>
			</view>
			
			<!-- 系统设置区域 -->
			<view class="section-title">
				<text class="title-text">系统设置</text>
			</view>
			<view class="settings-list">
				<view class="setting-item" v-for="(item, index) in settings" :key="index" @click="handleSetting(item)">
					<view class="setting-left">
						<image class="setting-icon" :src="item.icon"></image>
						<text class="setting-name">{{item.name}}</text>
					</view>
					<image class="arrow-icon" src="/static/arrow-right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/api.js';
	import { handleAuthError } from '../../utils/auth.js';
	
	export default {
		data() {
			return {
				userInfo: {
					userId: '',
					nickName: '',
					avatar: '',
					balance: 0,
					coupons: 0,
					points: 0
				},
				services: [
					{
						name: '余额记录',
						icon: '/static/icon-wallet.png',
						path: '/pages/mine/balance/index'
					},
					{
						name: '联系客服',
						icon: '/static/icon-service.png',
						path: '/pages/mine/service'
					},
					{
						name: '推广码',
						icon: '/static/icon-qrcode.png',
						path: '/pages/mine/promotion/index'
					},
					{
						name: '我的会员',
						icon: '/static/icon-member.png',
						path: '/pages/mine/member/index'
					}
				],
				settings: [
					{
						name: '修改信息',
						icon: '/static/icon-security.png',
						path: '/pages/mine/profile/profile'
					},
					{
						name: '隐私设置',
						icon: '/static/icon-privacy.png',
						path: '/pages/mine/privacy'
					},
					{
						name: '通知设置',
						icon: '/static/icon-notification.png',
						path: '/pages/mine/notification'
					},
					{
						name: '关于我们',
						icon: '/static/icon-about.png',
						path: '/pages/mine/about'
					}
				]
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				try {
					const profileRes = await api.user.getCurrentUserInfo();
					if (profileRes.code === 200 && profileRes.data) {
						this.userInfo = {
							userId: profileRes.data.userId,
							nickName: profileRes.data.nickName || '未设置昵称',
							avatar: profileRes.data.avatar || '/static/default-avatar.png',
							balance: profileRes.data.balance || 0,
							coupons: profileRes.data.coupons || 0,
							points: profileRes.data.points || 0
						};
						return;
					}
					
					const userInfoStorage = uni.getStorageSync('userInfo');
					if (userInfoStorage) {
						const parsedUserInfo = JSON.parse(userInfoStorage);
						this.userInfo.userId = parsedUserInfo.userId || '';
						this.userInfo.nickName = parsedUserInfo.nickName || '未设置昵称';
						this.userInfo.avatar = parsedUserInfo.avatar || '/static/default-avatar.png';
						
						if (this.userInfo.userId) {
							try {
								const userDetailRes = await api.user.userInfo(this.userInfo.userId);
								if (userDetailRes.code === 200) {
									this.userInfo.balance = userDetailRes.data.balance || 0;
									this.userInfo.coupons = userDetailRes.data.coupons || 0;
									this.userInfo.points = userDetailRes.data.points || 0;
								}
							} catch (detailErr) {
								console.error('获取用户详情失败', detailErr);
							}
						}
					}
				} catch (err) {
					try {
						await handleAuthError(err);
						this.getUserInfo();
					} catch (error) {
						console.error('获取用户信息失败', error);
					}
				}
			},
			navigateToProfile() {
				uni.navigateTo({
					url: '/pages/mine/profile/profile'
				});
			},
			navigateToService(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					});
				} else {
					uni.showToast({
						title: '正在前往：' + item.name,
						icon: 'none'
					});
				}
			},
			handleSetting(item) {
				uni.navigateTo({
					url: item.path
				});
			},
			navigateToBalanceLog() {
				uni.navigateTo({
					url: '/pages/mine/balance/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	
	.header-section {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.user-card {
		background: linear-gradient(135deg, #FF0000, #FF4D4D);
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		color: #fff;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.2);
	}
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		margin-right: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.user-detail {
		flex: 1;
	}
	
	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	
	.user-id {
		font-size: 26rpx;
		opacity: 0.8;
	}
	
	.edit-profile {
		padding: 8rpx 20rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
	}
	
	.edit-text {
		font-size: 26rpx;
		color: #FFFFFF;
	}
	
	.user-wallet {
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding-top: 20rpx;
		border-top: 1rpx solid rgba(255, 255, 255, 0.2);
	}
	
	.wallet-item {
		margin-bottom: 6rpx;
		flex: 1;
		position: relative;
		padding: 0 10rpx;
	}
	
	.wallet-amount {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	
	.wallet-label {
		font-size: 26rpx;
		opacity: 0.8;
	}
	
	/* 添加余额点击效果 */
	.wallet-item:first-child {
		position: relative;
		padding-right: 40rpx;
	}
	
	.wallet-item:first-child:after {
		content: '';
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 24rpx;
		height: 24rpx;
		background-image: url('/static/arrow-right.png');
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.8;
	}
	
	.form-container {
		padding: 0 20rpx 30rpx;
	}
	
	.section-title {
		margin: 30rpx 0 20rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF0000;
		position: relative;
		padding-left: 20rpx;
	}
	
	.title-text:before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(to bottom, #FF0000, #FF4D4D);
		border-radius: 3rpx;
	}
	
	.service-grid {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
	}
	
	.service-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.service-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}
	
	.service-name {
		font-size: 26rpx;
		color: #333;
	}
	
	.settings-list {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.setting-left {
		display: flex;
		align-items: center;
	}
	
	.setting-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.setting-name {
		font-size: 30rpx;
		color: #333;
	}
	
	.arrow-icon {
		width: 36rpx;
		height: 36rpx;
		opacity: 0.6;
	}
</style> 